<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/details.css">
</head>

<body>
    <div class="details ">


    </div>
    <script src="./js/ajax.js"></script>
    <script>
        //获取地址栏参数方法
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        //获取地址栏 id 参数
        const id = GetQueryString('id') //调用方法
        //根据id参数 获取当前商品的信息
        ajax({
            url: "http://localhost/6week/jumei/php/jumeiGood.php",
            type: 'post',
            dataType: 'json',
            data: {
                id: id
            },
            success: function (res) {
                console.log(res);
                let str = ''
                var goodDetails = res[0]
                str = `        
                    <div class="header main">
                            <div class="header_logo">

                            </div>
                            <div class="header_certif">
                                去购物车结算
                            </div>
                        </div>
                    </div>

                    <div class="deal_main clearfix">
                        <div class="deal_left">
                            <div class="deal_titles">
                                <p class="long_title">
                                    <strong>
                                    </strong>
                                    <span class="single_price"></span>
                                    ${goodDetails.good_name}
                                </p>
                            </div>
                            <div class="preview_product">
                                <div class="preview_product_id">
                                    <div class="detail_sold_out"></div>
                                    <img src=${goodDetails.image}>
                                </div>
                            </div>
                            <!-- JiaThis Button BEGIN -->
                            <div class="product_info">
                                <div class="product_info_list fl">
                                    <a target="_blank" href="">保湿</a>
                                    <a target="_blank" href="">补水</a>
                                    <a target="_blank" href="">滋润</a>
                                    <a target="_blank" href="">抗皱</a>
                                    <a target="_blank" href="">去黑眼圈</a>
                                    <a target="_blank" href="">收敛毛孔</a>
                                </div>
                                <div class="jiathis_style fr">
                                    <a href="" class="jiathis" target="_blank">分享到 &gt;</a>
                                </div>
                            </div>

                            <!-- JiaThis Button END -->
                        </div>
                        <div class="deal_right">
                            <div class="r_first clearfix">
                                <a href="" target="_blank" rel="nofollow"><img src="./img/26.jpg" class="logo_brand" alt="logo_brand"
                                        onerror="this.style.display='none'"></a>
                                <div class="flag_box_main clearfix fr">
                                    <img src="./img/25.jpg" alt="flag" class="p_img_lg" onerror="this.parentNode.style.display='none'">
                                    <ul class="fl">
                                        <li class="area_code_b">韩国</li>
                                        <li class="deal_en">Korea</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="r_second">
                                <ul class="price_module clearfix">
                                    <!--非组合start-->
                                    <li class="jumei_price"><em class="jp_cur">¥${goodDetails.price}</li>
                                    <li class="market_price" style="display: list-item;"><em class="currency_arial">¥</em>299</li>
                                </ul>
                            </div>
                            <div class="people clearfix">
                                <!--秒杀不显示心愿 购买人数-->
                                <div class="num fl">2790人已购买</div>
                                <div class="comments fr"></div>
                            </div>
                            <div class="r_third">
                                <!--包邮-->
                                <dl class="mail_policy clearfix">
                                    <dt class="fl">包邮政策：</dt>
                                    <dd class="global_mail fl">
                                        本商品单件包邮
                                        （新疆部分区域除外） </dd>
                                </dl>
                                <!--服务政策-->
                                <dl class="mail_policy clearfix">
                                    <dt class="fl">服务政策：</dt>
                                    <dd class="global_mail">
                                        <a style="color: #ea1d5d"></a>
                                        <span class="day"></span>本商品不支持退货
                                    </dd>
                                </dl>
                                <!--食品警示-->
                                <!--食品警示-->
                                <!--药监局提示-->
                                <dl class="mail_policy clearfix">
                                    <dt class="fl">国家药监局提示：</dt>
                                    <dd class="global_mail">
                                        化妆品不能宣称医疗作用，也没有治疗作用，宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。
                                    </dd>
                                </dl>
                                <!--药监局提示-->
                                <dl class="deal_sku clearfix" style="display: block;">
                                    <dt><span class="r_third_spacing">型</span>号:</dt>
                                    <dt class="dt_relative">
                                        <div class="deal_sku_input">请选择型号</div>
                                        <i class="new_detail_btn"></i>
                                        <!-- <div class="warningtip">请选择型号</div> -->
                                        <ul class="sku_select" id="sku_select">
                                            <li><a href="javascript:;"><span>男士水乳洁面套盒 120ml+120ml+140ml</span></a></li>
                                            <li><a href="javascript:;"><span>小神仙水水 1000ml</span></a></li>
                                            <li><a href="javascript:;"><span>神仙水乳+九代眼霜 100ml+100ml+30ml*2+30ml</span></a></li>
                                            <li><a href="javascript:;"><span>B5水乳140ml+140ml</span></a></li>
                                            <li><a href="javascript:;"><span>神仙水乳精华套装 100ml+100ml+30ml</span></a></li>
                                            <li><a href="javascript:;"><span>神仙水乳+八代眼霜 100ml+100ml+30ml*2+30ml</span></a></li>
                                            <li><a href="javascript:;"><span>神仙水乳+防晒 100ml+100ml+30ml*2+50ml</span></a></li>
                                            <li><a href="javascript:;"><span>神仙水乳套装 100ml+100ml+30ml+30ml</span></a></li>
                                        </ul>
                                    </dt>
                                </dl>
                            </div>
                            <div class="r_fourth">
                                <a href="">加入购物车</a>
                                <a href="">联系客服</a>
            </div>`

                document.querySelector('.details').innerHTML = str
            }

        })
    </script>
</body>

</html>